<template>
  <div>
    <!-- 面包屑导航视图区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>权限列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- card卡片导航视图区域 -->
    <el-card>
      <!-- 请求权限列表的数据  Tabel表格 ：data绑定数据源值="自定义data中rightList" -->
      <!-- 当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽 -->
      <!-- stripe属性可以创建带斑马纹的表格。它接受一个Boolean，默认为false，设置为true即为启用。 -->
      <!-- border	是否带有纵向边框 -->
      <!-- **权限等级列使用组件-Tag（选基础用法） 自定义属性使用作用域插槽使用template标签添加slot-scope属性=值-scope属性  **标签颜色可以通过color自定义 -->
      <!--在组件模板上添加指令 使用 v-if v-else-if v-else指令来判断等级 success默认牛油果色 danger红色 warning橙色 info灰色-类似开关关闭状态色-->
      <el-table :data="rightList" style="width: 100%" stripe border>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="authName" label="权限名称" width="180"></el-table-column>
        <el-table-column prop="path" label="路径" width="180"></el-table-column>
        <el-table-column prop="level" label="权限等级">
          <template slot-scope="scope">
            <el-tag type="success" v-if="scope.row.level=='0'">一级</el-tag>
            <el-tag type="danger" v-else-if="scope.row.level=='1'">二级</el-tag>
            <el-tag type="warning" v-else>三级</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 所有的权限列表  1.定义空数组 后台API接口1.4.1 文档数据有list/treee
      rightList: []
    }
  },
  //2. 在生命周期钩子函数created中-发起数据请求时机 调用getRightList（）函数来获取所有权限
  // 获取所有的权限
  created() {
    this.getRightList()
  },
  methods: {
    // 获取权限列表
    async getRightList() {
      const { data: res } = await this.$http.get('rights/list')
      console.log(res)
      // 获取权限列表失败 将错误信息返回 注意return    error
      if (res.meta.status !== 200) {
        return this.$message.error('获取权限列表失败')
      }
      //    获取权限列表成功  获取到的权限列表赋值给data中自定义的空列表数组
      this.rightList = res.data
      // console.log(this.rightList);
    }
  }
}
</script>

<style>
</style>
